<template>
  <!--表单组件-->
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose"
    :visible=true :title="title" width="800px">
    
    <el-form ref="form" :model="form" size="small" :disabled="disabled" >
      <el-row class="form-section-container">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="心眼垂直距离(cm)">
              <el-input v-model="form.cycz" type="number"/>
            </el-form-item>
            <el-form-item label="安静血压(mmhg)">
              <el-input v-model="form.ajxy" type="number"/>
            </el-form-item>
            <el-form-item label="下肢蹬力检测">
              <el-select
                v-model.number="form.xzdl"
                placeholder="请选择"
              >
                <el-option
                  v-for="[key, value] in xzdlStatus"
                  :key="value"
                  :label="value"
                  :value="key"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="14">
          <el-form-item label="HP抗荷动作血压(mmHg)">
          </el-form-item>
          <el-form-item label="未着抗荷服" label-width="100px">
            <el-input v-model="form.hpxyWf" type="number"/>
          </el-form-item>
          <el-form-item label="着抗荷服" label-width="100px">
            <el-input v-model="form.hpxy" type="number"/>
          </el-form-item>
          <el-form-item label="左下肢(kg)" label-width="100px">
            <el-input v-model="form.zxz" type="number"/>
          </el-form-item>
          <el-form-item label="右下肢(kg)" label-width="100px">
            <el-input v-model="form.yxz" type="number"/>
          </el-form-item>
          <el-form-item label="持续时间(s)" label-width="100px">
            <el-input v-model="form.cxsj" type="number"/>
          </el-form-item>
        </el-col>
        </el-row>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="HP动作掌握程度">
            <el-select
              v-model="form.hpzw"
              placeholder="请选择"
            >
              <el-option
                v-for="[key, value] in skillLevels"
                :key="value"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="曲线同步程度" alt="呼吸曲线与呼吸引导曲线同步程度">
            <el-select
              v-model="form.qxtb"
              placeholder="请选择"
              >
              <el-option
                v-for="[key, value] in syncLevels"
                :key="value"
                :label="value"
                :value="key"
                />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item  alt="公式：((训练收缩压-安静收缩呀)/心眼距离/1.28)" label="未着抗荷服HP动作(G 值)">
            <el-input v-model="form.gWf" type="number"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="着抗荷服HP动作(G 值)">
            <el-input v-model="form.g" type="number"/>
          </el-form-item>
        </el-col>
      </el-row>

        <!-- </div>
      </div> -->

      <el-form-item label="建议">
        <el-input type="textarea" v-model="form.jy" />
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="评定结果">
            <el-select
              v-model="form.result"
              placeholder="请选择"
            >
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="记录人" prop="createBy">
            <el-input v-model="form.createBy" disabled/>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="记录日期" prop="createTime">
            <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="date" disabled/>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import {get, edit, add} from '@/api/trainKhdz'

import { ITEM_HPHKDZ, PASS_STATUS, SKILL_LEVELS, SYNC_LEVELS, RATE_RESULTS} from '@/utils/constants'


const defaultForm = { id: null, trainId: null, trainItemId: null, cycz: null, ajxy: null, hpxyWf: null, hpxy: null, 
  xzdl: null, zxz: null, yxz: null, cxsj: null, hpzw: null, qxtb: null, g: null, gWf: null, date: null, createBy: null,
   result: null, jy: null, createTime: null }

export default {
  name: 'HpkhdzDialog',
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      form: { ...defaultForm },
      title: 'HP抗荷动作训练',
      xzdlStatus: PASS_STATUS,
      skillLevels: SKILL_LEVELS,
      syncLevels: SYNC_LEVELS,
      resultOptions: RATE_RESULTS,
      isLoading: false // 提交按钮的加载状态
    };
  },
  methods: {
    emit: function(event) {

    },
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done(); // 调用done()来关闭对话框        
      }
    },
    handleCommit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    console.log(this.trainId, this.itemId);
    if (this.trainId !== -1) {
      this.shouldUpdate = false;

      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        console.log(response, this.form);

      });
    }
  },
  updated() {

    // 组件更新后执行的逻辑，比如获取数据
  },
  mounted() {
  }
}
</script>

<style scoped>
.form-section-container {
  border: 1px solid #DCDFE6;
  padding: 15px 20px;
  border-radius: 4px;
  margin-bottom: 15px;
}
/* .header {
  display: flex;border: 1px solid gray;padding: 0 5px;
} */
.left {
  flex: 2; width: 100%;
  border-right: 1px solid gray;
}
.line {
  height: 120px;
  display: flex;
  width: 100%;
  /* border-right: 1px solid gray; */
}
.secline {
  height: 120px;
  padding: 50px 10px;
}
.twoline {
  display: flex;
  width: 100%;
  margin-left: 10px;
}
.el-form-item--small.el-form-item {
  margin-bottom: 5px;
}
.el-select {
  width: 100%;
}

::v-deep .line .el-input__inner {
  height: 80px;
}
</style>